import React, {Component} from 'react';
import {MenuOutlined,AudioOutlined,SearchOutlined,PlayCircleOutlined} from "@ant-design/icons"
import { Carousel,Drawer,Input,  } from 'antd';
import {NavLink,Route} from "react-router-dom";
import Fetch from "../Fetch";
import "./Index.css";
import Song from "../ Song/Song";
import Seek from "../Seek/Seek";
class Index extends Component {
    constructor(props) {
        super(props);
        this.state={
            contentStyle :{
                height: '132px',
                // color: '#fff',
                // lineHeight: '160px',
                textAlign: 'center',
                background: '#364d79',
                borderRadius: "10px",
                overflow:"hidden",

            },
            dataArray:[],
            lunbotu:[],
            navIon:[],
            TGe:[],

            visible:false,
            setVisible:false,
        }

    }
    render() {
        return (
            <div >
                <div className={"index-root"}>


<header> <MenuOutlined onClick={this.showDrawer.bind(this)} className={'icon-top'} />
    <li>
        <svg t="1606910763983" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3042" width="200" height="200"><path d="M473.832727 139.636364a334.196364 334.196364 0 1 0 236.450909 97.978181A333.265455 333.265455 0 0 0 473.832727 139.636364z m0 615.098181a280.901818 280.901818 0 1 1 277.178182-280.901818 280.669091 280.669091 0 0 1-277.178182 280.901818zM872.261818 814.545455l-72.843636-69.818182a41.658182 41.658182 0 0 0-58.181818 0 40.261818 40.261818 0 0 0-12.101819 28.625454 40.494545 40.494545 0 0 0 12.101819 28.625455L814.545455 872.494545a41.658182 41.658182 0 0 0 58.181818 0 39.563636 39.563636 0 0 0 11.636363-28.392727 40.261818 40.261818 0 0 0-12.101818-29.556363z"
                                                                                                                                                                    p-id="3043" fill="#707070"></path></svg>
        <input onFocus={this.focusclick.bind(this)} type="text" placeholder={"请输入您想要搜索的歌曲"}/>
    </li>

<AudioOutlined className={'icon-top'}/> </header>
                <div className={"Left"}>
                    <Drawer
                        placement="right"
                        closable={false}
                        onClose={this.onClose.bind(this)}
                        visible={this.state.visible}
                    >
<h1>侧边栏</h1>
                    </Drawer>
                </div>
                <div className={'buoimg'}>
                    <Carousel autoplay>
                        {
                            this.state.lunbotu.map((v,i)=>{
                            return  <div key={i}>
                                <h3 style={this.state.contentStyle}><img src={v.pic} alt=""/></h3>
                            </div>
                        })}

                    </Carousel>
                </div>
                <div style={{width: "100%",overflowX:"auto"}} className={"nav-root"}>
                <div className={"nav-iong"}>
                    {this.state.navIon.map((v,i)=>{
                        return <div key={i} className={"nav-tiao"}>
                            <div className={"iong"}>
                                <img src={v.iconUrl} alt=""/>
                            </div>
                            <p>{v.name}</p>
                        </div>
                    })}
                </div>
                </div>
                <div>
                    <h3>推荐歌单</h3>
                    <div style={{display:"flex",justifyContent:"space-between",width:"100%", flexWrap:"wrap"}}>
                    {this.state.TGe.map((v,i)=>{
                        return <div key={i} className={"Tge-div"} onClick={this.Song.bind(this,v.id)}>
                            <div style={{borderRadius:"10px",overflow:"hidden",position:"relative"}}>
                                <img src={v.picUrl} alt="" style={{width:"100%"}}/>
                                <p className={"playCount"}><PlayCircleOutlined />{
                                   Math.floor(v.playCount/10000)}万</p>
                            </div>
                           <p className={"Tge-text"}>{v.name}</p>
                        </div>
                    })}
                    </div>
                </div>
                </div>
                <div className={"zhanshi"}>
                    <Route path={"/index/song"} component={Song}/>
                </div>
            </div>
        );
    }
    onClose(){
        // setVisible(false);
        console.log("关闭")
        this.setState((state,props)=>{
            return {
                visible:false
            }
        })
    };
    showDrawer(){
        console.log("哈哈")
        // setVisible(true);
        this.setState((state,props)=>{
            return {
                visible:true,
            }
        })
    };
    //点击输入框
    focusclick(){

        this.props.history.push({pathname:"/seek"})
    }
    //点击歌单
Song(id){
    this.props.history.push({pathname:"/index/song",state:{id:id}} )
}
    componentWillMount() {
        //首页发现
        Fetch.get("http://localhost:3000/homepage/block/page").then(data=>{
            // console.log(data.data.blocks[0].extInfo.banners)
           this.setState((state,props)=>{
               return {
                   dataArray:data,
                   lunbotu:data.data.blocks[0].extInfo.banners,
               }
           })
            console.log(this.state.lunbotu)
        })
    //    首页nave图标
        Fetch.get("http://localhost:3000/homepage/dragon/ball").then(data=>{
            this.setState((state,props)=>{
                return {
                    navIon:data.data
                }
            })
        })
    //    推荐歌单
        Fetch.get("http://localhost:3000/personalized?limit=6").then(data=>{
            console.log(data.result)
            this.setState((state,props)=>{
                return {
                    TGe:data.result
                }
            })
        })
    }

}

export default Index;